<template>
  <view class="main-pd u-p-t-28">
    <view class="yz-card" v-if="cardList.length">
      <view v-for="(item, index) in cardList" :key="item.id" class="u-m-b-20">
        <u-swipe-action>
          <u-swipe-action-item
            :options="options"
            @click="delDzkHandle($event, item.dzyzkId)">
            <view
              :class="[
                'card-item',
                item.dzkIdcard == userStore.dzkIdcard ? 'actived' : '',
              ]"
              @click="setdzkhandle(item)">
              <view
                class="choose-con"
                v-if="item.dzkIdcard == userStore.dzkIdcard">
                <u-image
                  src="@/static/images/icon15.png"
                  width="73rpx"
                  height="75rpx"></u-image>
              </view>
              <view class="card-top">
                <view class="u-flex">
                  <view
                    ><u-image
                      src="@/static/images/icon16.png"
                      width="40rpx"
                      height="40rpx"></u-image
                  ></view>
                  <view class="color-333 font-32 fw-600 u-m-l-14 u-m-r-28"
                    >电子业主卡</view
                  >
                  <view class="sf-icon">{{
                    item.isZk == 1 ? "主卡" : "副卡"
                  }}</view>
                </view>
                <view class="u-m-t-20">
                  <text class="font-28 color-333 u-m-r-36 fw-600">{{
                    item.dzkName
                  }}</text>
                  <text class="font-28 color-333 fw-600">{{
                    item.deptName
                  }}</text>
                </view>
              </view>
              <view class="card-bottom">
                <view
                  class="tab-item"
                  @click.stop="
                    $u.route('/pagesB/dzyz/personInfo', {
                      isZk: item.isZk,
                      idcard: item.dzkIdcard,
                      dzkTel: item.dzkTel,
                    })
                  ">
                  个人信息</view
                >
                <view
                  class="tab-item"
                  @click.stop="
                    $u.route('/pagesB/dzyz/xqInfo', {
                      isZk: item.isZk,
                      idcard: item.dzkIdcard,
                      dzkTel: item.dzkTel,
                    })
                  ">
                  小区信息</view
                >
                <view
                  class="tab-item"
                  v-if="item.isZk == 1"
                  @click.stop="$u.route('/pagesB/dzyz/cyxxInfo',{yzkId:item.dzyzkId})"
                  >成员信息</view
                >
              </view>
            </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
    </view>
    <view class="u-p-50" v-else>
      <u-empty
        mode="data"
        text="暂未绑定电子业主卡，请点击下方的“添加电子业主卡”绑定">
      </u-empty>
    </view>
    <u-button
      text="添加电子业主卡"
      color="linear-gradient(90deg, #FA827D 0%, #F34B47 100%)"
      :customStyle="{
        fontSize: '36rpx',
        height: '96rpx',
      }"
      @click="$u.route('/pagesB/dzyz/yzxx')"></u-button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getdzkListApi, setdzkApi, deldzkApi, getOpenIdApi } from "@/api/index";
import useInfoStore from "@/store/user";
import { onLoad,onShow } from "@dcloudio/uni-app";
import { showConfirm } from "@/utils/common";
const userStore = useInfoStore();
let cardList = ref([]);
let options = ref([
  {
    text: "删除",
    style: {
      backgroundColor: "#f34b47",
      color: "#fff",
    },
  },
]);
// 获取列表
const getDzkList = () => {
  getdzkListApi({
    openId: userStore.openId,
  }).then((res) => {
    if (res.success && res.data) {
      let data = res.data;
      cardList.value = data;
    }
  });
};
// 切换电子业主卡
const setdzkhandle = (param) => {
  showConfirm("确定选择此电子卡吗？").then((res) => {
    if (res.confirm) {
      setdzkApi({
        openId: userStore.openId,
        dzyzkId: param.dzyzkId,
      })
        .then((res) => {
          if (res.success) {
            uni.$u.toast("切换成功！");
            userStore.setUserInfo({
              dzkIdcard: param.dzkIdcard,
              yzId: param.yzId,
              zkId: param.zkId,
              dzyzkId: param.dzyzkId,
              dzkSex: param.dzkSex,
              dzkName: param.dzkName,
              dzkTel: param.dzkTel,
              deptName: param.deptName,
              deptId: param.deptId,
              louNumber: param.louNumber,
              dyNumber: param.dyNumber,
              fjNumber: param.fjNumber,
            });
          } else {
            uni.$u.toast(res.msg);
          }
        })
        .catch(() => {
          return false;
        });
    }
  });
};
const delDzkHandle = (val, id) => {
  showConfirm("确定删除此电子业主卡吗？").then((modalSuccess) => {
    if (modalSuccess.confirm) {
      showConfirm(
        "此业主卡相关的所有数据将自动删除且不可恢复，请再次确认是否删除"
      ).then((modalSuccess2) => {
        deldzkApi(id).then((res) => {
          if (res.success) {
            uni.$u.toast("删除成功！");
            getDzkList();
          } else {
            uni.$u.toast(res.msg);
          }
        });
      });
    }
  });
};
const getOpenId = () => {
  if(!userStore.openId){
    wx.login({
      success(loginRes) {
        if (loginRes.code) {
          getOpenIdApi({
            code: loginRes.code,
          }).then((res) => {
            if (res.success) {
              let openId = res.data;
              userStore.setOpenId(openId);
              getDzkList();
            }
          });
        } else {
          console.log("登录失败！" + res.errMsg);
        }
      },
    });
  }
  else{
    getDzkList();
  }
};
onShow(() => {
    getOpenId() 
});
</script>

<style lang="scss" scoped>
.yz-card {
  height: 1122rpx;
  overflow: auto;

  .card-item {
    margin-bottom: 20rpx;
    position: relative;
    border-radius: 12rpx;

    .choose-con {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 99999;
    }

    .card-top {
      background-color: #fff;
      padding: 32rpx;

      .sf-icon {
        font-size: 22rpx;
        color: #8c8c8c;
        padding: 3rpx 12rpx;
        border-radius: 5rpx;
        border: 1rpx solid #8c8c8c;
      }
    }

    .card-bottom {
      background: rgba(243, 75, 71, 0.05);
      border-radius: 0rpx 0rpx 12rpx 12rpx;
      display: flex;

      .tab-item {
        flex: 1;
        text-align: center;
        color: #595959;
        font-size: 28rpx;
        padding: 19rpx 0;
        position: relative;

        &:not(:last-child) {
          &::after {
            content: "";
            display: inline-block;
            width: 1rpx;
            height: 32rpx;
            position: absolute;
            right: 0;
            background: #bfbfbf;
          }
        }
      }
    }
  }
}
</style>
